<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>问卷统计</title>
		<link rel="stylesheet" href="../../lib/element-ui/theme-chalk/index.css">
		<link rel="stylesheet" href="../../lib/vxe-table/index.css">
		<link rel="stylesheet" href="../../lib/vxe-table-plugin-element/style.css">
		<link rel="stylesheet" href="../../lib/font-awesome/css/font-awesome.min.css">
		<script type="text/javascript" src="../../lib/vue/vue.js"></script>
		<script type="text/javascript" src="../../lib/xe-utils/xe-utils.js"></script>
		<script type="text/javascript" src="../../lib/element-ui/index.js"></script>
		<script type="text/javascript" src="../../lib/vxe-table/index.js"></script>
		<script type="text/javascript" src="../../lib/vxe-table-plugin-element/index.js"></script>
		<script type="text/javascript" src="../../lib/xlsx/xlsx.full.min.js"></script>
		<script type="text/javascript" src="../../lib/vxe-table-plugin-export-xlsx/index.min.js"></script>
		<script type="text/javascript" src="../../lib/xe-ajax/xe-ajax.js"></script>
		<script type="text/javascript" src="../../static/js/jquery.min.js"></script>
		<script type="text/javascript" src="../../static/js/webApi.js"></script>
		<script type="text/javascript" src="../../static/js/tool.js"></script>
		<style type="text/css">
			/*
		        找到html标签、body标签，和挂载的标签
		        都给他们统一设置样式
		    */
			html,
			body,
			#app,
			.el-container {
				/*设置内部填充为0，几个布局元素之间没有间距*/
				padding: 0px;
				/*外部间距也是如此设置*/
				margin: 0px;
				/*统一设置高度为100%*/
				height: 100%;
			}

			.el-main {
				padding: 4px;
			}

			.text {
				font-size: 14px;
			}

			.item {
				/* margin-bottom: 18px; */
			}

			.clearfix:before,
			.clearfix:after {
				display: table;
				content: "";
			}

			.question {
				overflow: hidden;
				/* 隐藏溢出 */
				word-break: break-all;
				/* break-all(允许在单词内换行。) */
				text-overflow: ellipsis;
				/* 超出部分省略号 */
				display: -webkit-box;
				/** 对象作为伸缩盒子模型显示 **/
				-webkit-box-orient: vertical;
				/** 设置或检索伸缩盒对象的子元素的排列方式 **/
				-webkit-line-clamp: 2;
				/** 显示的行数 **/
			}

			[v-cloak] {
				display: none !important;
			}

			.box {
				width: 400px;

				.top {
					text-align: center;
				}

				.left {
					float: left;
					width: 60px;
				}

				.right {
					float: right;
					width: 60px;
				}

				.bottom {
					clear: both;
					text-align: center;
				}

				.item {
					margin: 4px;
				}

				.left .el-tooltip__popper,
				.right .el-tooltip__popper {
					padding: 8px 10px;
				}
			}

			.flex-container {
				display: -webkit-flex;
				display: flex;
				-webkit-flex-wrap: wrap;
				flex-wrap: wrap;
				width: 100%;
				height: 100%;
			}

			.flex-item {
				width: 100%;
				margin: 20px;
			}
		</style>
	</head>
	<body>
		<el-container id="app">
			<el-main>
				<div class="flex-container">
					<div class="flex-item" v-for="(item,index) in tableData" :key="index" v-loading="loading">
						<el-card class="box-card">
							<div slot="header" class="clearfix">
								<div style="font-size: 15px; text-align: center;">
									<span style="font-weight: 700;font-size: 20px;">{{ item.area_name }} -
										{{ item.paper_name }}</span>
									<div><span>当前投票人数:{{ item.total }}</span></div>
								</div>
							</div>
							<div class="text item">
								<div v-for="(children,childrenIndex) in item.question" :key="childrenIndex"
									style="margin:  30px 0;">
									<div style="font-size: 15px;">
										<div style="font-weight: 700;">
											<span>问题{{ childrenIndex+1 }}：</span>
											<span>{{ children.qname }}</span>
										</div>
										<div style="font-size: 15px;margin-top: 5px;">
											<span style="color: red;font-size: 15px;font-weight: 700;">投票结果：</span>
										</div>
										<div v-for="(Qitem,Qindex) in tableData[index].answers" v-if="Qitem.pq_id == children.qid && item.answers[Qindex].pq_id == children.qid">
											<span style="font-weight: 700;">{{ Qitem.answer_name }}<span style="color: #878787;">（投票人房屋总面积:{{ Qitem.room_mj }}m²）</span></span>
											<el-progress :text-inside="true" :stroke-width="26"
												:percentage="Qitem.zb" :color="colors"></el-progress>
										</div>
									</div>
								</div>
								<!-- <div style="font-size: 15px;">
									<span style="font-weight: 700;">建议：</span>
									<span> {{ item.advise}} </span>
								</div> -->
							</div>
						</el-card>
					</div>
				</div>
			</el-main>
		</el-container>
	</body>
	<script>
		window.onload = function() {
			var main = {
				data() {
					return {
						tableData: [],
						percentage: 10,
						colors: [{
								color: '#f56c6c',
								percentage: 20
							},
							{
								color: '#e6a23c',
								percentage: 40
							},
							{
								color: '#1989fa',
								percentage: 60
							},
							{
								color: '#6f7ad3',
								percentage: 80
							},
							{
								color: '#5cb87a',
								percentage: 100
							},
						],
						loading: true
					}
				},
				created() {
					this.ExamPaperTj(Tool.getParam('id'))
				},
				mounted() {

				},
				methods: {
					ExamPaperTj(id) {
						XEAjax.post(`${curlFinance}/wenjuan/ExamPaperTj`, {
							paperId: id,
							type: '',
						}).then(res => {
							if (res.code == 200) {
								this.$XModal.message({
									message: '获取数据成功',
									status: 'success'
								});
								var temp = res.data;
								var temppaper_id = '';
								var obj = null;
								var tempquesid = '';
								for (var i = 0; i < temp.length; i++) {
									if (temppaper_id != temp[i].paper_id) {
										obj = {
											paper_name: '',
											answers: []
										};
										temppaper_id = temp[i].paper_id;
										obj['paper_name'] = temp[i].paper_name;
										obj['total'] = temp[i].total;
										obj['area_name'] = temp[i].area_name;
										//obj['advise'] = temp[i].answer;
										if (tempquesid != temp[i].pq_id) {
											tempquesid = temp[i].pq_id;
											obj['answers'].push(temp[i]);
											obj['question'] = [{
												qname: temp[i].question_name,
												qid: tempquesid,
												room_mj: temp[i].room_mj
											}];
										}
										this.tableData.push(obj);
									} else {
										if (tempquesid != temp[i].pq_id) {
											tempquesid = temp[i].pq_id;
											obj['question'].push({
												qname: temp[i].question_name,
												qid: tempquesid,
												room_mj: temp[i].room_mj
											});
											obj['answers'].push(temp[i]);
										} else {
											obj['answers'].push(temp[i]);
										}
									}
								}
								this.loading = false
							} else {
								this.$XModal.message({
									message: '获取数据失败',
									status: 'error'
								});
								this.loading = false
							}
						});
					},
				},
			};
			var vue = Vue.extend(main);
			new vue().$mount('#app');
		}
	</script>
</html>
